import React from 'react';
import PropTypes from 'prop-types';
import { Table, Modal } from 'antd';
import styles from './List.less';
import classnames from 'classnames';
import AnimTableBody from '../../components/DataTable/AnimTableBody';
import { DropOption } from '../../components';
import { Link } from 'dva/router';
import moment from 'moment';

const confirm = Modal.confirm;

const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) => {
  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      onEditItem(record);
    } else if (e.key === '2') {
      confirm({
        title: '你确定删除该行记录吗?',
        onOk() {
          onDeleteItem(record.id);
        },
      });
    }
  };

  const columns = [
    {
      title: '配置Key',
      dataIndex: 'configKey',
      key: 'configKey',
    }, {
      title: '配置值',
      dataIndex: 'configValue',
      key: 'configValue',
    }, {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    }, {
      title: '添加时间',
      dataIndex: 'ctime',
      key: 'ctime',
      render: (text, record) => {
        return moment(text).format('YYYY-MM-DD  hh:mm:ss');
      },
    }, {
      title: '操作',
      key: 'operation',
      width: 100,
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: '更新' }, { key: '2', name: '删除' }]} />;
      },
    },
  ];

  const getBodyWrapperProps = {
    page: location.query.page,
    current: tableProps.pagination.current,
  };

  const getBodyWrapper = body => { return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body; };
  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true, [styles.motion]: isMotion })}
        bordered
        scroll={{ x: 1250 }}
        columns={columns}
        simple
        rowKey={record => record.id}
        // getBodyWrapper={getBodyWrapper}
      />
    </div>
  );
};

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
};

export default List;
